<template>
<div class="layout">
	<div class="layout-inner">
    <transition :name="transitionName">
      <keep-alive>
        <router-view ></router-view>
      </keep-alive>
    </transition>
  </div>
  <footer class="ftb">
    <ul>
      <li :class="[curPath == '/index'?'cur':'']" @click="gotourl('/index')"><del class="s1"></del><span>首页</span></li>
      <li :class="[curPath == '/list'?'cur':'']" @click="gotourl('/list')"><del class="s2"></del><span>实战</span></li>
      <li :class="[curPath == '/channel'?'cur':'']" @click="gotourl('/channel')"><del class="s3"></del><span>相关</span></li>
      <li :class="[curPath == '/my'?'cur':'']" @click="gotourl('/my')"><del class="s4"></del><span>我的</span></li>
    </ul>
  </footer>  	
</div>
</template>
<script>
export default {
	name:'aliveTab',
	data() {
		return{
			curPath:this.$route.path,
			transitionName:'',
		}
	},	
  watch: {
    $route(to, from) {
			this.curPath =  this.$route.path;	
      if(typeof(from.meta.index) == 'undefined') return;
      if(to.meta.index > from.meta.index){
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  },	
  methods: {
    gotourl(url){
      if(this.curPath == url) return;
      this.$router.replace(url);
    }
  },
	beforeRouteLeave(to, from, next) {next()}		
}
</script>
<style scoped>
footer {height:1rem; width:100%; position:relative; z-index:22; overflow:hidden; border-top:0.02rem solid #F2F2F4; background:#fff; box-shadow: inset 0 0 0 0 #E3E2E5;}
footer ul{display:flex;justify-content:center;}
footer li{flex:1;text-align:center; position:relative;}
footer li del{ width:0.46rem; height:0.46rem;  margin:0.1rem auto 0.03rem; background:url(../../assets/footer.png) no-repeat; display:block; background-size:2.8rem 1.4rem;}
footer li del.s1{ background-position:-0.14rem -0.83rem}
footer li del.s2{ background-position:-0.85rem -0.83rem}
footer li del.s3{ background-position:-1.51rem -0.83rem}
footer li del.s4{ background-position:-2.23rem -0.83rem}
footer li span{ font-size:0.24rem; color:#929598; vertical-align:top;}
footer li.cur del.s1{ background-position:-0.14rem -0.12rem}
footer li.cur del.s2{ background-position:-0.85rem -0.12rem}
footer li.cur del.s3{ background-position:-1.51rem -0.12rem}
footer li.cur del.s4{ background-position:-2.23rem -0.12rem}
footer li.cur span{color:#1AA5FE;}
</style>